<template>
    <div class="category">
        <h3>{{title}}</h3>
        <!-- <ul>
            <li v-for="(item,index) in listData" :key="index">
                {{item}}
            </li>
        </ul> -->
        <!-- 定义一个插槽(挖个坑，等待组件的使用者进行填充),可以通过name属性给插槽取名字 -->
        <slot name="center">
            这是我的默认值，组件的使用者没有填充就显示我的数据.
        </slot>
        <slot name="footer">
            这是我的默认值，组件的使用者没有填充就显示我的数据.
        </slot>
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title','listData']
    }
</script>

<style>
    .category{
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3{
        text-align: center;
        background-color: orange;
    }
    img{
        width: 100%;
    }
</style>